<template>
	<div>
		<div class="chart">
			<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
			<div class="bar">
				<div id="bar" style="width: 600px;height:400px;"></div>
				<p>每月订单销售总额</p>
			</div>
			<div class="pie">
				<div id="pie" style="width: 600px;height:400px;"></div>
				<p>支付方式数量统计</p>
			</div>
		</div>
	</div>
</template>

<script>
	// echarts局部引入
	import * as echarts from 'echarts';

	var _this = this;
	export default {
		name: '',
		data() {
			return {
				// 柱状图数据
				orderSalesData: [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				// 饼图数据
				payTypeData: [
					// {value: 1048, name: '1'},
					//     {value: 735, name: '2'},
					//     {value: 580, name: '邮件营销'},
					//     {value: 484, name: '联盟广告'},
					//     {value: 300, name: '视频广告'}
				]
			}
		},
		watch: {
			// 深度监听
			deep: true,
			// 监听要变得数据
			// 监听柱状图得数据变化
			// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
			orderSalesData: {
				// n 新值 o旧值
				handler(n, o) {
					this.$nextTick(function() {
						this.drawBar();
					})
				},
				immediate: true //初始化数据执行
			},
			// 监听圆饼得数据变化
			payTypeData: {
				handler(n, o) {
					this.$nextTick(function() {
						this.drawPie();
					})
				},
				immediate: true //初始化数据执行
			}
		},
		created() {
			// vue实例已经完成
			_this = this;

		},
		mounted() {
			// 柱状图
			this.drawBar()
			// 圆饼
			this.drawPie()
			this.getData()

		},
		methods: {
			// 报表
			drawBar() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('bar'));
				// 绘制图表
				myChart.setOption({
					title: {
						text: ''
					},
					tooltip: {},
					xAxis: {
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						name: '销量',
						type: 'bar',
						// data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
						data: _this.orderSalesData
					}]
				});
			},
			// 圆
			drawPie() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('pie'));
				myChart.setOption({
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						// data: [
						//     {value: 1048, name: '搜索引擎'},
						//     {value: 735, name: '直接访问'},
						//     {value: 580, name: '邮件营销'},
						//     {value: 484, name: '联盟广告'},
						//     {value: 300, name: '视频广告'}
						// ],
						data: _this.payTypeData
					}]
				})
			},
			// 获取报表数据
			getData() {
				_this.$axios.get("/api/v1/showEveryMonthPrice", {
						params: {
							years: 2021
						},
						headers: {
							token: JSON.parse(sessionStorage.getItem("member")).token
						}
					}).then(res => {
						// console.log(res);
						if (res.data.code == 200) {
							let data = [];
							// console.log(123);
							res.data.data.map(item => {
								// console.log(item.Totalprice);
								data.push(item.Totalprice)
							})
							// console.log(data);
							_this.orderSalesData = data
							// console.log(_this.orderSalesData);
						} else {

						}

					}),
					_this.$axios.get("/api/v1/showPayType", {
						headers: {
							token: JSON.parse(sessionStorage.getItem("member")).token
						}
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							let data = [];
							res.data.data.map(item => {
								data.push({
									value: item.Nums,
									name: item.Paytype
								})
							})
							_this.payTypeData = data
							console.log(_this.payTypeData);
						} else {

						}
					})
			}
		}
	}
</script>

<style scoped="scoped">
	.chart {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding-top: 50px;
		box-sizing: border-box;
	}
	.bar,.pie{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		color: #606266;
	}
</style>
